<template>
  <div class="institution">
    <el-container>
      <el-container>
        <el-main style="background-color: #f3f4f7">
          <el-container>
            <el-aside class="sidebar">
              <el-tree
                :data="treeData"
                :props="defaultProps"
                :default-expand-all="false"
                :accordion="true"
                :expand-on-click-node="false"
                icon-class="el-icon-circle-plus"
                @current-change="clickTree"
              />
            </el-aside>
            <el-container class="content">
              <el-main class="content-top">
                <el-row>
                  <el-col>
                    <el-form
                      ref="ruleForm"
                      label-width="90px"
                      :model="ruleForm"
                    >
                      <el-col><h4 style="margin-top: 0">机构信息</h4></el-col>
                      <!-- #机构信息模块 -->
                      <el-row>
                        <el-col
                          :span="8"
                        ><el-form-item label="机构编号">
                          <el-input
                            v-model="ruleForm.id"
                            :disabled="isdisabled"
                            size="mini"
                            style="padding-right: 10px"
                          /> </el-form-item></el-col>
                        <el-col
                          :span="8"
                        ><el-form-item label="机构名称">
                          <el-input
                            v-model="ruleForm.name"
                            :disabled="isdisabled"
                            size="mini"
                            style="padding-right: 10px"
                          /> </el-form-item></el-col>
                        <el-col
                          :span="8"
                        ><el-form-item label="机构类型">
                          <el-select
                            v-model="ruleForm"
                            :disabled="isdisabled"
                            size="mini"
                            style="margin-right: 10px"
                            placeholder="选择活动区域"
                          >
                            <el-option
                              v-if="ruleForm.type === 1"
                              label="一级转运中心"
                              :value="ruleForm.province.id"
                            />
                            <el-option
                              v-if="ruleForm.type === 2"
                              label="二级转运中心"
                              :value="ruleForm.province.id"
                            />
                            <el-option
                              v-if="ruleForm.type === 3"
                              label="三级转运中心"
                              :value="ruleForm.province.id"
                            />
                          </el-select> </el-form-item></el-col>
                      </el-row>
                      <!-- #机构地址模块 -->
                      <el-row>
                        <el-col><el-form-item label="机构地址">
                          <el-select
                            v-model="ruleForm"
                            :disabled="isdisabled"
                            size="mini"
                            style="margin-right: 6px"
                            placeholder="选择活动区域"
                          >
                            <el-option
                              :label="ruleForm.province.name"
                              :value="ruleForm.province.id"
                            />
                          </el-select>
                          <el-select
                            v-model="ruleForm"
                            :disabled="isdisabled"
                            size="mini"
                            style="margin-right: 6px"
                            placeholder="选择活动区域"
                          >
                            <el-option
                              :label="ruleForm.city.name"
                              :value="ruleForm.city.id"
                            />
                          </el-select>
                          <el-select
                            v-model="ruleForm"
                            :disabled="isdisabled"
                            size="mini"
                            style="margin-right: 6px"
                            placeholder="选择活动区域"
                          >
                            <el-option
                              :label="ruleForm.county.name"
                              :value="ruleForm.county.id"
                            />
                          </el-select> </el-form-item></el-col>
                      </el-row>
                      <!-- #地址模块 -->
                      <el-row>
                        <el-col
                          :span="8"
                        ><el-form-item label="详细地址">
                          <el-input
                            v-model="ruleForm.address"
                            :disabled="isdisabled"
                            size="mini"
                            style="padding-right: 10px"
                          /> </el-form-item></el-col>
                        <el-col
                          :span="8"
                        ><el-form-item label="经度">
                          <el-input
                            v-model="ruleForm.province.lat"
                            :disabled="isdisabled"
                            size="mini"
                            style="padding-right: 10px"
                          >
                            <span slot="append">L</span>
                          </el-input>
                        </el-form-item></el-col>
                        <el-col
                          :span="8"
                        ><el-form-item label="纬度">
                          <el-input
                            v-model="ruleForm.province.lng"
                            :disabled="isdisabled"
                            size="mini"
                            style="padding-right: 10px"
                          >
                            <span slot="append">M</span>
                          </el-input>
                        </el-form-item></el-col>
                      </el-row>
                      <!-- #电话模块 -->
                      <el-row>
                        <el-col
                          :span="8"
                        ><el-form-item label="机构负责人">
                          <el-input
                            v-model="ruleForm.managerName"
                            :disabled="isdisabled"
                            size="mini"
                            style="padding-right: 10px"
                          /> </el-form-item></el-col>
                        <el-col
                          :span="8"
                        ><el-form-item label="机构电话">
                          <el-input
                            v-model="ruleForm.phone"
                            :disabled="isdisabled"
                            size="mini"
                            style="padding-right: 10px"
                          /> </el-form-item></el-col>
                      </el-row>
                      <!-- #编辑按钮 -->
                      <el-row type="flex" justify="center">
                        <el-col style="text-align: center">
                          <el-button
                            v-show="isdisabled"
                            type="warning"
                            style="
                              background-color: #e15536;
                              border: 0;
                              width: 100px;
                            "
                            @click="isdisabled=false"
                          >编辑</el-button>
                        </el-col>
                      </el-row>
                      <!-- 保存按钮 -->
                      <el-row type="flex" justify="center">
                        <el-col style="text-align: center">
                          <el-button
                            v-show="!isdisabled"
                            type="warning"
                            style="
                              background-color: #e15536;
                              border: 0;
                              width: 100px;
                            "
                            @click="update"
                          >保存</el-button>
                        </el-col>
                      </el-row>
                    </el-form>
                  </el-col>
                </el-row>
              </el-main>
              <!-- $员工信息表格数据 -->
              <el-main class="content-bottom">
                <el-row>
                  <el-col>
                    <h4 style="margin-top: 0">员工信息</h4>
                  </el-col>
                  <el-col>
                    <el-table size="mini" style="width: 100%" :data="tabelData">
                      <el-table-column
                        label="序号"
                        width="80"
                        type="index"
                        :index="qwer"
                      >
                        <!-- <template slot-scope="scope">
                          <div>
                            {{

                            }}
                          </div>
                        </template> -->
                      </el-table-column>
                      <el-table-column
                        prop="userId"
                        label="员工编号"
                        width="180"
                      />
                      <el-table-column prop="name" label="员工姓名" />
                      <el-table-column prop="mobile" label="手机号" />
                      <el-table-column prop="agency.name" label="所属机构" />
                      <el-table-column prop="account" label="系统账户" />
                      <el-table-column prop="roleNames[0]" label="系统角色" />
                      <el-table-column
                        prop="status"
                        label="账号状态"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <div v-if="scope.row.status === 1">
                            <div class="aaa" />
                            正常
                          </div>
                          <div v-else>
                            <div class="bbb" />
                            异常
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-row
                      type="flex"
                      justify="end"
                      align="middle"
                      style="height: 60px"
                    >
                      <el-pagination
                        layout="prev, pager, next,total"
                        :page-size="staffPage.pageSize"
                        :current-page="staffPage.page"
                        :total="+counts"
                        @current-change="currentPage"
                      />
                    </el-row>
                  </el-col>
                </el-row>
              </el-main>
            </el-container>
          </el-container>
        </el-main>
        <!-- $底部样式 -->
        <el-footer style="background-color: #f3f4f7; padding-top: 100px">
          <el-row
            type="flex"
            justify="center"
            align="bottom"
            style="height: 100%"
          >
            <el-col style="text-align: center">
              <div style="font-size: 14px; margin-bottom: 15px; color: #cec4cd">
                江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2022 All
                Rights Reserved 苏ICP备16007882号-11
              </div>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {
  getManagerTree,
  getManagerDetails,
  getPagingMessage
  // updateInstitution
} from '@/api/essential'

export default {
  name: 'Institution',
  data() {
    return {
      isdisabled: true, // 是否禁用表单="isdisabled"
      tabelData: [

        // 员工信息
        {
          userId: '', // 员工编号
          name: '', // 员工名称
          mobile: '', // 手机号
          account: '', // 系统账户
          agency: {
            // 所属机构
            name: ''
          },
          roleNames: [], // 系统角色
          status: null // 账号状态
        }
      ],
      counts: null, // 数据总条数
      staffPage: {
        // 分页数据
        page: 1,
        pageSize: 5,
        agencyId: null // 机构ID
      },
      aaaForm: {
        address: '', // 地址
        cityId: '', // 市级行政机构ID
        countyId: '', // 县级行政机构ID
        extra: '', // 扩展字段，以json格式存储
        id: '', // 机构id
        latitude: '', // 纬度
        longitude: '', // 经度
        managerName: '', // 负责人
        name: '', // 名称
        parent: {
          //
          id: '', // 父级id
          name: '', // 父级机构名称
          subAgencies: '', // 父级子部门简要信息列表
          type: '' // 父级机构类型
        },
        parentId: '', // 父节点id
        phone: '', // 电话
        provinceId: '', // 省级行政机构ID
        status: '', // 是否可用
        type: '' // 1:一级转运，2：二级转运，3:网点
      },
      ruleForm: {
        id: '',
        name: '',
        type: '',
        address: '',
        managerName: '',
        phone: '',
        province: {
          name: '',
          id: '',
          lat: '',
          lng: '',
          mutiPoints: [] // 多边形经度合集
        },
        county: {
          name: '',
          id: '',
          lat: '',
          lng: '',
          mutiPoints: [] // 多边形经度合集
        },
        city: {
          name: '',
          id: '',
          lat: '',
          lng: '',
          mutiPoints: [] // 多边形经度合集
        }
      }, // 机构详情数据
      treeData: [], // 树形数据
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getManagerTree() // 获取树状机构信息
  },
  methods: {
    async update() {
      // 编辑保存
      // this.aaaForm.address
      // this.aaaForm.cityId
      // this.aaaForm.countyId
      // this.aaaForm.extra
      // this.aaaForm.id = this.ruleForm.id
      // this.aaaForm.latitude
      // this.aaaForm.longitude
      // this.aaaForm.managerName
      // this.aaaForm.name = this.ruleForm.name
      // this.aaaForm.parent
      // this.aaaForm.province.id
      // this.aaaForm.province.name
      // this.aaaForm.province.subAgencies
      // this.aaaForm.province.type
      // this.aaaForm.parentId
      // this.aaaForm.phone
      // this.aaaForm.provinceId
      // this.aaaForm.status
      // this.aaaForm.type
      // await updateInstitution(this.aaaForm)
      this.isdisabled = true
    },
    async getManagerTree() {
      // 获取树状机构信息
      const res = await getManagerTree()
      // 返回的数据是 Json 格式，要转化为对象
      this.treeData = JSON.parse(res.data)
      console.log(this.treeData)
    },
    async clickTree(data) {
      // 点击树状结构分支，获取数据，渲染表单和表格
      this.staffPage.agencyId = data.id
      const res = await getManagerDetails(data.id) // 获取机构详情
      const roues = await getPagingMessage(this.staffPage) // 获取员工信息
      console.log(res)
      this.ruleForm = res.data
      console.log(this.ruleForm)
      this.tabelData = roues.data.items
      this.counts = roues.data.counts
    },
    async currentPage(page) {
      // 员工信息分页
      this.staffPage.page = page // 设置当前页码
      const roues = await getPagingMessage(this.staffPage) // 获取员工信息
      this.tabelData = roues.data.items
      this.counts = roues.data.counts
    },
    qwer(index) {
      // 表格序号
      return (this.staffPage.page - 1) * this.staffPage.pageSize + 1 + index
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: 204px !important;
  //   height: 700px;
  margin-right: 20px;
  background-color: white;
  padding: 10px;
}
.content {
  display: flex;
  flex-direction: column;
  .content-top {
    margin-bottom: 20px;
    background-color: white;
  }
  .content-bottom {
    background-color: white;
  }
  .el-tree-node i {
    color: red; /* 设置图标颜色为红色 */
  }
}
.aaa {
  width: 8px;
  height: 8px;
  background-color: rgb(44, 215, 44);
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
}
.bbb {
  width: 8px;
  height: 8px;
  background-color: rgb(254, 2, 2);
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
}
</style>
